<template>
	<view class="px-2">
		<view class="uni-uploader">
			<view class="uni-uploader-head">
				<view class="uni-uploader-title">点击可预览选好的图片</view>
				<view class="uni-uploader-info">{{ imageList.length }}/9</view>
			</view>
			<view class="uni-uploader-body">
				<view class="uni-uploader__files">
					<block v-for="(item, index) in imageList" :key="index">
						<view class="uni-uploader__file position-relative">
							<image class="uni-uploader__img rounded" :src="item.url" :data-src="item.url" @tap="previewImage" mode="aspectFill"></image>
							<view
								class="position-absolute right-0 top-0"
								style="padding-left: 10rpx; padding-right: 10rpx; background-color: rgba(0, 0, 0, 0.3)"
								@click="deleteImage(index)"
							>
								<text class="iconfont icon-shanchu"></text>
							</view>
						</view>
					</block>

					<view class="uni-uploader__input-box rounded">
						<view class="uni-uploader__input" @tap="chooseImage"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import permision from '@/common/permission.js';
import { upload, delImg } from '@/request/Api/post.js';
var sourceType = [['camera'], ['album'], ['camera', 'album']];
var sizeType = [['compressed'], ['original'], ['compressed', 'original']];
// #ifdef APP
const base_url = 'http://192.168.133.79:8081/v1';
// #endif
// #ifdef H5
const base_url = '/api/v1';
// #endif
export default {
	props: {
		list: {
			type: Array
		}
	},
	data() {
		return {
			title: 'choose/previewImage',
			imageList: [],
			sourceTypeIndex: 2,
			sourceType: ['拍照', '相册', '拍照或相册'],
			sizeTypeIndex: 2,
			sizeType: ['压缩', '原图', '压缩或原图'],
			countIndex: 8,
			count: [1, 2, 3, 4, 5, 6, 7, 8, 9]
		};
	},
	mounted() {
		this.imageList = this.list;
	},
	onUnload() {
		(this.imageList = []),
			(this.sourceTypeIndex = 2),
			(this.sourceType = ['拍照', '相册', '拍照或相册']),
			(this.sizeTypeIndex = 2),
			(this.sizeType = ['压缩', '原图', '压缩或原图']),
			(this.countIndex = 8);
	},
	methods: {
		deleteImage(index) {
			uni.showModal({
				title: '确认删除吗',
				success: (res) => {
					if (res.confirm) {
						delImg([this.imageList[index].id]).then(() => {
							this.imageList.splice(index, 1);
							this.$emit('upimage', this.imageList);
						});
					}
				}
			});
		},
		sourceTypeChange: function (e) {
			this.sourceTypeIndex = parseInt(e.detail.value);
		},
		sizeTypeChange: function (e) {
			this.sizeTypeIndex = parseInt(e.detail.value);
		},
		countChange: function (e) {
			this.countIndex = e.detail.value;
		},
		chooseImage: async function () {
			// #ifdef APP-PLUS
			// TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
			if (this.sourceTypeIndex !== 2) {
				let status = await this.checkPermission();
				if (status !== 1) {
					return;
				}
			}
			// #endif

			if (this.imageList.length === 9) {
				let isContinue = await this.isFullImg();
				console.log('是否继续?', isContinue);
				if (!isContinue) {
					return;
				}
			}
			uni.chooseImage({
				sourceType: sourceType[this.sourceTypeIndex],
				sizeType: sizeType[this.sizeTypeIndex],
				count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
				// 这里就是选择图片成功
				success: (res) => {
					for (let i=0; i < res.tempFilePaths.length; i++) {
						uni.uploadFile({
							url: base_url + '/upload',
							// 上传多图片用files，单张用filepath
							filePath: res.tempFilePaths[i],
							name: 'file',
							header: {
								Auth: uni.getStorageSync('token')
							},
							success: (uploadFileRes) => {
								if (uploadFileRes.statusCode === 401) {
									uni.showModal({
										title: '提示',
										content: '请登录',
										success: (res) => {
											if (res.confirm) {
												uni.navigateTo({
													url: '/pages/login/login'
												});
											}
										}
									});
								}
								let ob = JSON.parse(uploadFileRes.data);
								this.imageList = this.imageList.concat(ob.data);
								this.$emit('upimage', this.imageList);
							},
							file: (res) => {
								uni.showToast({
									title: '上传失败',
									mask: true,
									icon: 'none'
								});
							}
						});
					}
				},
				fail: (err) => {
					console.log('err: ', err);
					// #ifdef APP-PLUS
					if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
						this.checkPermission(err.code);
					}
					// #endif
					// #ifdef MP
					if (err.errMsg.indexOf('cancel') !== '-1') {
						return;
					}
					uni.getSetting({
						success: (res) => {
							let authStatus = false;
							switch (this.sourceTypeIndex) {
								case 0:
									authStatus = res.authSetting['scope.camera'];
									break;
								case 1:
									authStatus = res.authSetting['scope.album'];
									break;
								case 2:
									authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
									break;
								default:
									break;
							}
							if (!authStatus) {
								uni.showModal({
									title: '授权失败',
									content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
									success: (res) => {
										if (res.confirm) {
											uni.openSetting();
										}
									}
								});
							}
						}
					});
					// #endif
				}
			});
		},
		isFullImg: function () {
			return new Promise((res) => {
				uni.showModal({
					content: '已经有9张图片了,是否清空现有图片？',
					success: (e) => {
						if (e.confirm) {
							this.imageList = [];
							res(true);
						} else {
							res(false);
						}
					},
					fail: () => {
						res(false);
					}
				});
			});
		},
		previewImage: function (e) {
			var current = e.target.dataset.src;
			uni.previewImage({
				current: current,
				urls: this.imageList.map((res) => {
					return res.url;
				})
			});
		},
		async checkPermission(code) {
			let type = code ? code - 1 : this.sourceTypeIndex;
			let status = permision.isIOS
				? await permision.requestIOS(sourceType[type][0])
				: await permision.requestAndroid(type === 0 ? 'android.permission.CAMERA' : 'android.permission.READ_EXTERNAL_STORAGE');

			if (status === null || status === 1) {
				status = 1;
			} else {
				uni.showModal({
					content: '没有开启权限',
					confirmText: '设置',
					success: function (res) {
						if (res.confirm) {
							permision.gotoAppSetting();
						}
					}
				});
			}

			return status;
		}
	}
};
</script>

<style>
.cell-pd {
	padding: 22rpx 30rpx;
}

.list-pd {
	margin-top: 50rpx;
}
</style>
